<template>
	<view>
		<view class="header box d-jc-sb d-ai-c">
			<view class="search box d-ai-c">
				<image class="ml-3" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/icon/search.png" mode=""></image>
				<input type="text" v-model="name" value="" placeholder="请输入医院名称" placeholder-style="color: #999999;font-size: 28rpx;"/>
			</view>
			<view class="searchbtn" @tap="search()">
				搜索
			</view>
		</view>
		<view class="mt-2 bg">
			<scroll-view scroll-y="true" :style="{height:hospitalheight+'px'}" @scrolltolower='nextPage()'>
				<view v-if="!isNull" class="hospital-list box d-jc-sb d-ai-c" v-for="(item,index) in gethospitallist" @tap="back(item.name,item.id)">
				<view class="address">
					<view class="">
						{{item.name}}
					</view>
					<view class="mt-1">
						{{item.address2}}
					</view>
				</view>
				<view class="distance">
					{{item.distanceUm/1000}}公里
				</view>
				</view>
				<view v-if="isNull" class="order_null">
					<image src="../../static/kongsousuo@2x.png"></image>
					<text>搜索不到，换一个试试~</text>
					<!-- <button class="btn-shop-list">去逛逛</button> -->
				</view>
		    </scroll-view>
		</view>
		<orange-fullloading textsize="30" :loadshow="loadshow" text="加载中"></orange-fullloading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadshow:true,
				name:'',
				hospitalheight:400,
				gethospitallist:'',
				pageNum:1,
				pageSize:10,
				isNull:false,
				hasNextPage:false,
				longitude:'',
				latitude:'',
				city:''
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.hospitalheight = res.windowHeight - uni.upx2px(160)
				}
			})
		},
		onLoad() {
			this.city = uni.getStorageSync("city")
			this.getlocation()
		},
		methods: {
			getlocation(){
				let _this = this
				uni.getLocation({
				    type: 'wgs84',
				    success:  function(res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						_this.longitude = res.longitude
						_this.latitude = res.latitude
						_this.hospitallist()
				    }
				});
			},
			back(name,id){
				var hospital = {
					name:name,
					id:id
				}
				uni.$emit('choosehospital',hospital)
				uni.navigateBack({
					delta:1
				})
			},
			nextPage() {
				// let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.gethospitallist({
						longitude:this.longitude,
						latitude:this.latitude,
						name:this.name,
						type:1,
						city:this.city
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.gethospitallist.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			hospitallist(){
				this.$api.gethospitallist({
					longitude:this.longitude,
					latitude:this.latitude,
					name:this.name,
					type:1,
					city:this.city
				},this.pageNum,this.pageSize).then((res) => {
					this.loadshow = false
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.gethospitallist = res.data.dataMap.list
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.gethospitallist.length < 1 ? true : false
					}
							
				})
			},
			search(){
				this.pageNum = 1
				this.hospitallist()
			},
		}
	}
</script>

<style lang="less" scoped>
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		margin-top: 20rpx;
		color: #666666;
		font-size: 28rpx;
	}
	
	.order_null image {
		margin: 0 auto;
		margin-top: 160rpx;
		width: 261rpx;
		height: 256rpx;
	}
	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
	.bg{
		background: #F2F7FF;
	}
page{
	background: #F2F7FF;
}
.header{
	width: 690rpx;
	height: 120rpx;
	background-color: #FFFFFF;
	padding: 0 30rpx 0 30rpx;
	.search{
		width: 540rpx;
		height: 80rpx;
		background: #F2F7FF;
		border-radius: 40rpx;
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.searchbtn{
		width: 140rpx;
		height: 80rpx;
		background-color: #FF8338;
		border-radius:50rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
	}
}
.hospital-list{
	height: 116rpx;
	width: 690rpx;
	padding: 0 30rpx 0 30rpx;
	background-color: #FFFFFF;
	margin-top: 3rpx;
	.address{
		width: 540rpx;
		view:nth-child(1){
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
		view:nth-child(2){
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}
	}
	.distance{
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
	}
}
</style>
